<template>
  <div class="page-life">
    <page-cover
      title="🏖️茶余饭后,聊聊天!"
      subtitle="生活不止有代码,别忘了还有诗和远方"
      bg="https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/9af3840152294a18836ac9786c3930ec.png"
    ></page-cover>

    <main v-loading="pages.loading">
      <section>
        <div
          v-for="(item, index) in pages.dynamicList"
          :key="index"
          class="item"
        >
          <div class="userinfo">
            <div class="head">
              <img :src="blogger.headImg" alt="" />
            </div>
            <div class="info">
              <p>{{ blogger.nickname }}</p>
              <p>{{ $dealChatTime(item.createDate) }}</p>
            </div>
          </div>
          <div class="content">
            <html-text :content="item.content"></html-text>
            <!-- 图片 -->
            <div class="imgs">
              <template v-if="item.images.length > 1">
                <div v-for="(v, i) in item.images" :key="i" class="img">
                  <el-image
                    style="width: 120px; height: 120px"
                    :src="v"
                    lazy
                    @click.native="addBrowse(item)"
                    :preview-src-list="item.images"
                  ></el-image>
                </div>
              </template>
              <div v-else class="img-one">
                <el-image
                  v-for="(v, i) in item.images"
                  :key="i"
                  style="max-width: 250px; max-height: 200px"
                  :src="v"
                  lazy
                  :preview-src-list="item.images"
                ></el-image>
              </div>
            </div>
            <!-- 文章 -->
            <div
              @click="toArticleDetail(item.articleId)"
              v-if="item.article"
              class="article"
            >
              <div class="article-cover">
                <img :src="item.article.coverImg" alt="" />
              </div>
              <div class="title">
                {{ item.article.title }}
              </div>
            </div>
            <!-- 外链视频 -->
            <div class="iframe-box" v-if="item.outerChainType == 2">
              <div class="iframe iframe-video" v-html="item.outerChain"></div>
            </div>
            <!-- 外链音频 -->
            <div class="iframe-box" v-if="item.outerChainType == 1">
              <div class="iframe" v-html="item.outerChain"></div>
            </div>
          </div>
          <!-- 点赞,评论 -->
          <div class="item-info">
            <div class="left">
              <span v-if="item.mark">{{ item.mark }}</span>
            </div>
            <div class="right">
              <div
                :style="{ color: item.isPraise == 1 ? '#2ebc3c' : '' }"
                @click="addPraise(item)"
                class="action"
              >
                <svg-icon icon-class="like-fill" />
                <span v-if="item.praiseNum">{{
                  item.praiseNum > 9 ? item.praiseNum : "0" + item.praiseNum
                }}</span>
              </div>
              <div @click="pages.current = item.dynamicId" class="action">
                <svg-icon icon-class="comment" />
                <span v-if="item.commentNum">{{
                  item.commentNum > 9 ? item.commentNum : "0" + item.commentNum
                }}</span>
              </div>
            </div>
          </div>
          <div class="comment">
            <!-- <file-comment></file-comment> -->
            <mobile-comment
              :current="pages.current"
              :total="item.commentNum"
              :commentId="item.dynamicId"
              :lists="item.commentList"
              @change="(id) => (pages.current = id)"
            ></mobile-comment>
          </div>
        </div>

        <div v-if="pages.dynamicList[0]" class="more">
          <div
            v-if="pages.dynamicList.length < pages.total"
            @click="loadPage"
            class="text"
          >
            还有{{ pages.total - pages.dynamicList.length }}条,看一下
            <i
              v-if="!pages.isLoadPage"
              style="font-weight: 600"
              class="el-icon-arrow-down"
            ></i>
            <i v-else class="el-icon-loading"></i>
          </div>
          <div v-else class="text">没有了哦,就这么多了~</div>
        </div>
      </section>
      <nav v-if="1">
        <!-- 博主信息 -->
        <div class="blogger">
          <div class="bg"></div>
          <div class="head">
            <img :src="blogger.headImg" alt="" />
          </div>
          <div class="name">{{ blogger.nickname }}</div>
          <div class="personality">{{ blogger.personalSignature }}</div>

          <div class="concat">
            <div val="" class="item">
              <div class="val-box">
                <span class="val">{{ getConcat("QQ") }}</span>
              </div>
              <svg-icon icon-class="qq" />
            </div>
            <div class="item">
              <div class="val-box">
                <span class="val">{{ getConcat("email") }}</span>
              </div>
              <svg-icon icon-class="email" />
            </div>
            <div class="item">
              <div class="val-box">
                <span class="val">{{ getConcat("git") }}</span>
              </div>
              <svg-icon icon-class="gitee" />
            </div>
          </div>
        </div>
      </nav>
    </main>
  </div>
</template>

<script>
import pageCover from "@/components/page-cover/page-cover";
import fileComment from "@/components/comment/file-comment";
import mobileComment from "@/components/comment/mobile-comment";
import htmlText from "@/components/html-text/html-text";
export default {
  name: "WorkspaceJsonNote",
  components: {
    pageCover,
    fileComment,
    mobileComment,
    htmlText,
  },
  data() {
    return {
      pages: {
        loading: true,
        isLoadPage: false,
        total: 0,
        dynamicList: [],
        current: "", // 当前回复或者评论的ID
        postData: {
          pageSize: 5,
          pageIndex: 1,
        },
      },
    };
  },
  computed: {
    blogger() {
      return this.$store.state.blogger;
    },
  },
  mounted() {
    this.getDynamicList();
  },
  methods: {
    getDynamicList() {
      this.$http("getDynamicList", this.pages.postData).then((res) => {
        this.pages.dynamicList = [...this.pages.dynamicList, ...res.data.lists];
        this.pages.total = res.data.total;
        this.pages.loading = false;
        this.pages.isLoadPage = false;
      });
    },
    loadPage() {
      if (this.pages.dynamicList.length < this.pages.total) {
        this.pages.isLoadPage = true;
        this.pages.postData.pageIndex += 1;
        this.getDynamicList();
      }
    },
    getConcat(type) {
      let cur = this.blogger.contact.find((i) => i.type == type);
      return cur.text;
    },
    toArticleDetail(id) {
      window.open(`/#/note/articleDetail/${id}`, "_blank");
    },
    // 点赞
    addPraise(item) {
      if (item.isPraise != 0) return;
      this.$http("addPraise", {
        targetId: item.dynamicId,
        targetType: "2",
      }).then((res) => {
        console.log("点赞成功");
        item.isPraise = 1;
        item.praiseNum += 1;
        this.$notify({
          title: "感谢欣赏",
          message: "谢谢你,远方的朋友!!!",
          duration: 3500,
          type: "success",
        });
      });
    },
    addBrowse(item) {
      this.$http("addBrowse", {
        targetId: item.dynamicId,
        targetType: "2",
      }).then((res) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.page-life {
  cursor: pointer;
  //   background: #f5f5f5;
}

main {
  max-width: 1000px;
  margin: auto;
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 9;
  margin-top: -80px;
  padding: 0 10px;
}
section {
  flex: 1;
  background: #fff;
  padding: 30px 0;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  .item {
    border-bottom: 1px solid #f5f5f5;
    padding: 0 15px 20px;
    margin-bottom: 20px;
    .userinfo {
      display: flex;
      .head {
        flex: none;
        width: 40px;
        height: 40px;
        background: #f5f5f5;
        margin-right: 10px;
        border-radius: 5px;
        overflow: hidden;
      }
      .info {
        p {
          &:nth-child(1) {
            font-weight: 600;
            color: #607199;
          }
          &:nth-child(2) {
            font-size: 14px;
            color: #c5c5c5;
          }
        }
      }
    }

    .content {
      padding-left: 50px;
      padding-top: 10px;
      .imgs {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        .img {
          width: 120px;
          height: 120px;
          background: #f5f5f5;
          margin: 0 10px 10px 0;
          overflow: hidden;
          ::v-deep img {
            width: auto !important;
          }
        }
        ::v-deep .el-image {
          display: flex;
          justify-content: center;
        }
      }
      .iframe-video {
        padding: 10px;
      }
      .iframe-box {
        max-width: 300px;
        display: flex;
        margin: 10px 0px 10px;
        .iframe {
          width: 100%;
          background: #f7f7f7;
          border-radius: 8px;
        }
      }

      .article {
        width: 80%;
        padding: 10px;
        display: flex;
        align-items: center;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        .article-cover {
          flex: none;
          width: 80px;
          height: 45px;
          background: #eee;
          margin-right: 10px;
          border-radius: 3px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .title {
          @include main-text-hidden(2);
        }
      }
    }

    .item-info {
      font-size: 14px;
      color: #999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 50px;
      padding-top: 25px;
      .left {
        color: #607199;
        padding-left: 5px;
      }
      .right {
        display: flex;
        background: #f7f7f7;
        border-radius: 3px;
        .action {
          padding: 5px 10px;
          &:nth-child(1) {
            .svg-icon {
              position: relative;
              top: -1px;
            }
          }
        }
        span {
          margin-left: 5px;
        }
      }
    }

    .comment {
      margin-left: 50px;
    }
  }

  .more {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    .text {
      width: 200px;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
      border-radius: 5px;
      text-align: center;
      background: #fff;
      // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
      color: #666;
    }
  }
}

nav {
  width: 280px;
  margin-left: 15px;
  position: sticky;
  top: 80px;
  .blogger {
    text-align: center;
    border-radius: 6px;
    background: #fff;
    position: relative;
    padding-top: 1px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);

    .head {
      width: 60px;
      height: 60px;
      margin: auto;
      background: #f5f5f5;
      border-radius: 50%;
      overflow: hidden;
      margin-top: 80px;
      position: relative;
      z-index: 9;
      border: 2px solid #fff;
    }
    .name {
      font-weight: 600;
      padding: 20px 0 10px;
    }
    .personality {
      color: #999;
      font-size: 14px;
      letter-spacing: 1.2px;
    }

    .concat {
      font-size: 18px;
      display: flex;
      justify-content: center;
      padding: 20px 0 15px;
      border-top: 1px solid #f5f5f5;
      margin-top: 20px;
      .item {
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin: 0 10px;
        color: #999;
        border: 1px solid #999;
        border-radius: 50%;
        position: relative;
        .val-box {
          display: none;
          height: 50px;
          position: absolute;
          top: -45px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;
          span {
            // word-break: normal;
            white-space: nowrap;
          }
          .val {
            background: #fff;
            font-size: 14px;
            padding: 10px 20px;
            border-radius: 40px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
          }
        }
        &:hover {
          border-color: #2ebc3c;
          color: #2ebc3c !important;
          .val-box {
            display: block;
          }
        }
      }
    }

    .bg {
      width: 100%;
      height: 110px;
      background-image: url("https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/f4360ba454d24fa0805d55417808f567.png");
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      left: 0px;
      top: 0;
      border-radius: 6px;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        left: 0;
        background: linear-gradient(transparent, #fff);
      }
    }
  }
}

@media (max-width: 900px) {
  nav {
    display: none;
  }
}
@media (max-width: 550px) {
  main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .item {
    padding: 0 8px 15px !important;
    .head {
      width: 35px !important;
      height: 35px !important;
      margin-right: 5px !important;
    }
    .userinfo {
      .info {
        p {
          &:nth-child(1) {
            font-size: 14px;
          }
          &:nth-child(2) {
            font-size: 12px;
          }
        }
      }
    }
    .content,
    .item-info {
      padding-left: 40px !important;
    }
    .imgs {
      .img {
        width: 90px !important;
        height: 90px !important;
      }
    }
    .comment {
      margin-left: 40px !important;
    }
  }
}

::v-deep iframe {
  width: 100%;
}
</style>
